<template>
	<!-- 物品信息填选 -->
	  <layout title="填写任务信息" background="#fff">
		<tohome />
		<view class="screen">
			<view class="proMes_title">
				<text>任务类型（单选）</text>
			</view>
			<view class="proMes_selectList">
				<view 
					class="proMes_selectList_item " 
					:class="item.selected==true ?'active':''" 
					v-for="(item,index) in selectList" 
					:key="index"
					@click="changeSelect(index)">
					{{item.value}}
				</view>
			</view>
			<view class="proMes_title">
				<text class="vertical_bottom">难度系数/KG</text>
				<text class="vertical_bottom proMes_title_text2">&nbsp;tip：每增加一点系数/重量，增加{{ kgFee }}元</text>
			</view>
			<view class="proMes_slider">
				<u-slider v-model="kg" :height="20" :activeColor="'linear-gradient(to right, #22CEFF , #4E95FC)'" :blockWidth="31" inactiveColor="#E0E0E0" min="2"></u-slider>
				<view class="proMes_slider_value">
					<text>1</text>
					<text style="font-size: 30rpx;color: #282828;font-weight: 800;">{{kg/2}}</text>
					<text>50</text>
				</view>
			</view>
			<view class="proMes_title">
				<text>备注</text>
			</view>
			<view class="proMes_textarea">
				<u-input type="textarea" clearable placeholder="备注：如遇猎人垫付资金行为，请用户与猎人私下结算"
						v-model="remark" height="200" maxlength="500" />
			</view>
			<view class="default-button proMes_btn" @tap="submit">
				确定
			</view>
			<view class="screen-bottomFill" style="opacity: 1;" :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'">
				<!-- 用来填充导航 和 底部的多余 -->
			</view>
		</view>
	</layout>
</template>
<script>
	export default {
		data() {
			return {
				navigationBarStyle: {
					background: '',
					color: 'black',
					iconText: '填写物品信息' //导航栏文字
				},
				kg:6,
				remark:'',
				selectList: [
				],
				prevPageFullPath:'',
				kgFee: ''
			};
		},
		onLoad(option) {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			this.prevPageFullPath = prevPage.$page.fullPath
			this.phoneNo = option.phoneNo
			this.$u.api.getGoodsTypeList().then(res => {
				if (res.code == '200') {
					let goodList = []
					if(this.vuex_goodTypeList.length>0) {
						this.vuex_goodTypeList.map(item=>{
							goodList.push(item.key)
						})
					}
					res.data.map(item=>{
						item.selected = false
						if(this.prevPageFullPath == "/pages/sys/cuser/confirmOrder") {
							 if (goodList.includes(item.key)) item.selected = true
						}
					})
					this.selectList = res.data
				} else {
					this.$u.toast(res.message);
				}
			});
		},
		onShow() {
			if(this.prevPageFullPath == "/pages/sys/cuser/confirmOrder") {
				this.kg = this.vuex_kg
				this.remark = this.vuex_remark
			}
			this.$u.api.calcRule().then(res => {
				this.kgFee = res.data.perkgfee
			});
			
		},
		watch:{
		},
		methods: {
			changeSelect(e){
				this.selectList.forEach((item, index) => {
					if(index === e) {
							item.selected = !item.selected
						} else {
							item.selected = false
						}
				})
				// this.selectList[e].selected = !this.selectList[e].selected
			},
			submit(){
				let pa = {}
				let goodTypeList = []
				this.selectList.map((item)=>{
					if(item.selected == true) goodTypeList.push(item)
		 		})
				if(goodTypeList.length<1){
					this.$u.toast('请选择一种任务类型任务概况请在备注中描述');
					return
				}
				this.$u.vuex('vuex_goodTypeList', goodTypeList)
				this.$u.vuex('vuex_kg', this.kg/2)
				this.$u.vuex('vuex_remark', this.remark)
				if(this.prevPageFullPath == "/pages/sys/cuser/confirmOrder") {
					uni.navigateBack()
				}else {
					uni.navigateTo({
						url: '/pages/sys/cuser/confirmOrder'
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';
	.proMes_title {
		padding: 38rpx 30rpx 24rpx;
		color: #282828;
		font-size: 28rpx;
	}
	.proMes_selectList {
		padding: 0 2.8%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 32rpx;
	}
	.proMes_selectList_item {
		width: 30%;
		margin: 0 1.5% 24rpx;
		line-height: 64rpx;
		height: 64rpx;
		background: #F5F6F8;
		border-radius: 32rpx;
		color: #282828;
		text-align: center;
		box-sizing: border-box;
	}
	.proMes_selectList_item.active {
		color: #4E95FC;
		border: 1rpx solid #4E95FC;
		line-height: 60rpx;
		background: #E5EEFF;
	}
	.proMes_title_text2 {
		font-size: 26rpx;
		color: #B5B5B5;
	}
	.proMes_slider {
		padding: 16rpx 30rpx;
	}
	.proMes_slider_value {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
		color: #282828;
		font-size: 26rpx;
	}
	.proMes_textarea {
		padding: 25rpx 27rpx;
		margin: 0 30rpx;
		border: 1px solid #D4D4D4;
		border-radius: 10rpx;
	}
	.proMes_btn {
		margin: 60rpx 30rpx;
	}
</style>
